<template>
    <div>
        <el-table v-if="chartTabsId === 1" :data="tableData" style="width: 100%" size="large" :row-style="rowStyle"
            :header-cell-style="{ background: '#F3F3F7' }">
            <el-table-column prop="pricingCategory" label="核价类目" v-if="isRow" show-overflow-tooltip align="center" />
            <el-table-column prop="styleName" label="商品名称" show-overflow-tooltip align="center" />
            <el-table-column prop="id" label="商品编码" show-overflow-tooltip align="center" />
            <el-table-column prop="styleCode" label="商品69码" show-overflow-tooltip align="center" />
            <el-table-column prop="productCategoryName" label="类目" show-overflow-tooltip align="center" />
            <el-table-column label="招商员" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLastLog?.requestNickName }}
                </template>
            </el-table-column>
            <el-table-column prop="specs" label="规格/材质" show-overflow-tooltip align="center" />
            <el-table-column label="机制" show-overflow-tooltip align="center">
                <template #default="scope">
                    <div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[0] ||
                            null,
                            '一') }}</div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[1] ||
                            null,
                            '二') }}</div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[2] ||
                            null,
                            '三') }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌名称" show-overflow-tooltip align="center" />
            <el-table-column label="最初送审时间" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLog?.requestTime }}
                </template>
            </el-table-column>
            <el-table-column label="审批人" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLastLog?.auditNickName }}
                </template>
            </el-table-column>
            <el-table-column label="当前审批结果" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ statusName(scope?.row?.auditFirstLastLog?.firstStatus) }}
                </template>

            </el-table-column>
            <el-table-column prop="auditNum" label="当前审批次数" show-overflow-tooltip align="center" />
            <el-table-column prop="date" label="审批通过时间" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLastLog?.firstStatus === 11 ? scope?.row?.auditFirstLastLog?.auditTime : ''
                    }}
                </template>
            </el-table-column>
        </el-table>
        <el-table v-if="chartTabsId === 2" :data="tableData" style="width: 100%" size="large" :row-style="rowStyle"
            :header-cell-style="{ background: '#F3F3F7' }">
            <el-table-column prop="pricingCategory" label="核价类目" v-if="isRow" show-overflow-tooltip align="center" />
            <el-table-column prop="styleName" label="商品名称" show-overflow-tooltip align="center" />
            <el-table-column prop="id" label="商品编码" show-overflow-tooltip align="center" />
            <el-table-column prop="styleCode" label="商品69码" show-overflow-tooltip align="center" />
            <el-table-column prop="productCategoryName" label="类目" show-overflow-tooltip align="center" />
            <el-table-column label="招商员" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditSecondFirstLog?.requestNickName }}
                </template>
            </el-table-column>
            <el-table-column prop="specs" label="规格/材质" show-overflow-tooltip align="center" />
            <el-table-column label="机制" show-overflow-tooltip align="center">
                <template #default="scope">
                    <div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[0] ||
                            null,
                            '一') }}</div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[1] ||
                            null,
                            '二') }}</div>
                        <div>{{ computedMechanism(scope?.row?.hmMechanismsList && scope?.row?.hmMechanismsList[2] ||
                            null,
                            '三') }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="初审建议价格" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLastLog?.auditPriceRemark }}
                </template>
            </el-table-column>
            <el-table-column label="初审审批人" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditFirstLastLog?.auditNickName }}
                </template>
            </el-table-column>
            <el-table-column label="最初送审时间" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditSecondFirstLog?.requestTime }}
                </template>
            </el-table-column>
            <el-table-column label="最初送审机制" show-overflow-tooltip align="center">
                <template #default="scope">
                    <div>
                        <div>{{ computedMechanism(scope?.row?.auditSecondFirstLog?.mechanismLogList &&
                            scope?.row?.auditSecondFirstLog?.mechanismLogList[0] ||
                            null,
                            '一') }}</div>
                        <div>{{ computedMechanism(scope?.row?.auditSecondFirstLog?.mechanismLogList &&
                            scope?.row?.auditSecondFirstLog?.mechanismLogList[1] ||
                            null,
                            '二') }}</div>
                        <div>{{ computedMechanism(scope?.row?.auditSecondFirstLog?.mechanismLogList &&
                            scope?.row?.auditSecondFirstLog?.mechanismLogList[2] ||
                            null,
                            '三') }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="当前审批结果" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ statusName(scope?.row?.auditSecondLog?.auditStatus) }}
                </template>
            </el-table-column>
            <el-table-column prop="auditSecondNum" label="当前审批次数" show-overflow-tooltip align="center" />
            <el-table-column label="复审审批人" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditSecondLog?.auditNickName }}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="审批通过时间" show-overflow-tooltip align="center">
                <template #default="scope">
                    {{ scope?.row?.auditSecondLog?.auditStatus === 13 ? scope?.row?.auditSecondLog?.auditTime : '' }}
                </template>
            </el-table-column>
            <el-table-column label="审批通过机制" show-overflow-tooltip align="center">
                <template #default="scope">
                    <div v-if="scope?.row?.auditSecondLog?.auditStatus === 13">
                        <div>{{ computedMechanism(scope?.row?.auditSecondLog?.mechanismLogList &&
                            scope?.row?.auditSecondLog?.mechanismLogList[0] ||
                            null,
                            '一') }}</div>
                        <div>{{ computedMechanism(scope?.row?.auditSecondLog?.mechanismLogList &&
                            scope?.row?.auditSecondLog?.mechanismLogList[1] ||
                            null,
                            '二') }}</div>
                        <div>{{ computedMechanism(scope?.row?.auditSecondLog?.mechanismLogList &&
                            scope?.row?.auditSecondLog?.mechanismLogList[2] ||
                            null,
                            '三') }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="costDifference" label="单件盈收（成本：元）" show-overflow-tooltip align="center" />
        </el-table>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
const props = defineProps(['tableData', 'isRow', 'chartTabsId'])


const statusListOne = ref<{ userName: string; userId: string }[]>([
    { userName: '补充资质', userId: '9' },
    { userName: '重新议价', userId: '10' },
    { userName: '审批通过', userId: '11' },
    { userName: '补充资质 重新议价', userId: '8' },
]);
const statusListTwo = ref<{ userName: string; userId: string }[]>([
    { userName: '复审中', userId: '11' },
    { userName: '复审驳回', userId: '12' },
    { userName: '复审通过', userId: '13' },
]);

const rowStyle = (row: any) => {
    if (row.rowIndex % 2 !== 0) {
        return {
            background: '#F3F3F7'
        }
    } else {
        return {
            background: '#fff'
        }
    }
}
/**
 * 直播机制
 */
const computedMechanism = (row: any, numbers: string) => {
    if (row) {
        const price = row.price ? row.price : '-'
        const commission = row.commission ? row.commission + '%' : '-'
        const brokerage = row.brokerage ? row.brokerage + '%' : '-'
        const liveStreamingMechanism = row.liveStreamingMechanism ? row.liveStreamingMechanism : '-'
        const costPrice = row.costPrice ? row.costPrice : '-'
        if (row.cooperationMode) {
            if (row.cooperationMode == '分佣') {
                return '机制' + numbers + ': ' + '售价:' + price + ' 佣金:' + commission + ' 补充佣金:' + brokerage + ' 机制:' + liveStreamingMechanism + ' 成本:' + costPrice
            } else {
                return '机制' + numbers + ': ' + '成本:' + costPrice + ' 机制:' + liveStreamingMechanism
            }
        }
    }
}

// 核价状态回显
const statusName = (status: string) => {
    if (props.chartTabsId === 1) {
        const filterStatus = statusListOne.value.filter(item => item.userId == status)
        if (filterStatus.length > 0) {
            return filterStatus[0].userName
        }
    } else {
        const filterStatus = statusListTwo.value.filter(item => item.userId == status)
        if (filterStatus.length > 0) {
            return filterStatus[0].userName
        }
    }
}
</script>

<style lang="scss" scoped></style>